<template>
  <div class="flex flex-center" style="height: 100px">
    <t-btn color="brown" label="Menu with QInfiniteScroll" no-caps>
      <t-menu anchor="bottom middle" self="top middle" :offset="[0, 8]">
        <t-item-label header> Notifications </t-item-label>

        <t-separator />

        <t-list ref="scrollTargetRef" class="scroll" style="max-height: 250px">
          <t-infinite-scroll
            @load="onLoadMenu"
            :offset="250"
            :scroll-target="scrollTargetRef"
          >
            <t-item v-for="(item, index) in itemsMenu" :key="index">
              <t-item-section>
                {{ index + 1 }}. Lorem ipsum dolor sit amet consectetur
                adipisicing elit. Rerum repellendus sit voluptate voluptas
                eveniet porro. Rerum blanditiis perferendis totam, ea at omnis
                vel numquam exercitationem aut, natus minima, porro labore.
              </t-item-section>
            </t-item>

            <template v-slot:loading>
              <div class="text-center q-my-md">
                <t-spinner-dots color="primary" size="40px" />
              </div>
            </template>
          </t-infinite-scroll>
        </t-list>
      </t-menu>
    </t-btn>
  </div>
</template>

<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const itemsMenu = ref([{}, {}, {}, {}, {}, {}, {}]);
      const scrollTargetRef = ref(null);

      return {
        itemsMenu,
        scrollTargetRef,

        onLoadMenu(index, done) {
          if (index > 1) {
            setTimeout(() => {
              itemsMenu.value.push({}, {}, {}, {}, {}, {}, {});
              done();
            }, 2000);
          } else {
            setTimeout(() => {
              done();
            }, 200);
          }
        },
      };
    },
  };
</script>
